import React, { Fragment, useEffect, useState } from "react";
import ReactDOM from 'react-dom/client'

function Alert() {
    let [num, setNum] = useState(0);
    let timer = null;
    useEffect(() => {
        console.log("====componentDidMount====")
        timer = setInterval(() => setNum(num => num += 1), 1000);
        return () => {
            clearInterval(timer)
        }
    }, [])
    const death = () => {
        ReactDOM.hydrateRoot(document.getElementById("root"))
    }
    return (
        <Fragment>
            <div className="mt-3 alert alert-danger">当前数值为：{num}</div>
            <button className="btn btn-danger" onClick={death}>组件销毁</button>
        </Fragment>
    )
}

export default Alert